<template>
    <div class="resume-list-root">
        <div class="top">
            <div class="tab">
                <p class="tab_text">{{brow}}</p>
                <div class="tab_active"></div>
            </div>
        </div>
        <div class="resume_list">
            <resume class="resume_item" v-for="(item,index) in resume_list" :key="index" :item="item" :index="index"
                    @click-which="clickWhich"></resume>
        </div>

        <resume-pagination :total="total" :size="size" @hasPage="getPage"></resume-pagination>

        <el-dialog class="dialog-report" :title="userName+'推荐报告'" :visible.sync="reportQ">
            <resume-dialog :item="serverTalent"></resume-dialog>
        </el-dialog>

        <el-dialog class="dialog-report" :title="userName+'在线简历'" :visible.sync="onlineQ">
            <online-resume :talent="serverTalent" :show-ops="false"></online-resume>
        </el-dialog>

    </div>
</template>

<script>
  import Resume from './Resume'
  import resumeDialog from './resume-dilog'
  import OnlineResume from '../communication/OnlineResume/OnlineResume'
  import resumePagination from './resume-pagination'
  import * as _ from 'underscore'
  import _g from '../../assets/utils/global'

  export default {
    name: 'ResumeList',
    props: {
      resume_list: {
        type: Array,
        default: function() {
          let temps = []
          for (let i = 0; i < 0; i++) {
            temps.push({
              icon: '',
              nick: '高女士',
              job: '职位名称',
              type: '执业类型',
              salary: '期望年薪',
              age: '年龄',
              work_period: '工作年限',
              education: '学历',
              state: i % 4 === 0 ? '未过保' : '待入职'
            })
          }
          return temps
        }
      },
      brow: {
        type: String,
        default: ''
      },
      total: {
        type: Number,
        default: 0
      },
      size: {
        type: Number,
        default: 10
      }
    },
    computed: {
      userName() {
        if (this.serverTalent) {
          return this.serverTalent.userName
        } else {
          return '未知'
        }
      }
    },
    components: {
      resume: Resume,
      resumeDialog,
      OnlineResume,
      resumePagination
    },
    data() {
      return {
        reportQ: false,
        onlineQ: false,
        serverTalent: null
      }
    },
    methods: {
      clickWhich(ops, sid, index) {
        console.log(ops, sid, index)
        if (ops === 'report') {
          this.serverTalent = this.resume_list[index].so
          this.reportQ = true
        } else if (ops === 'online') {
          this.serverTalent = this.resume_list[index].so
          this.onlineQ = true
        } else if (ops === 'attachment') {

        } else if (ops === 'not') {
          //标记为不合适
          this.serverTalent = this.resume_list[index].so
          const jrrId = this.serverTalent.jrrId
          _g.apiPost('/company/updateAppropriate.do', { relationshipId: jrrId, state: 2, value: 4 })
            .then(res => {
              if (res && res.status === 0) {
                _g.message('人才标记为不合适成功', 'success')
              }
            })
        }
      },
      getPage(i) {
        this.$emit('page-change', i)
      }
    }
  }
</script>

<style scoped>

    p {
        margin: 0;
    }

    .resume-list-root {
        display: flex;
        flex-direction: column;
        background: #f2f2f2;
    }

    .top {
        width: 980px;
        height: 50px;
        background: rgba(255, 255, 255, 1);

        display: flex;
        flex-direction: row;
        align-items: center;

        padding-left: 50px;

        /*margin-top: 20px;*/
    }

    .resume_list {
        margin-top: 20px;

        display: flex;
        flex-direction: column;
    }

    .resume_item {
        margin-top: 1px;
    }

    .tab {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .tab_text {
        font-size: 20px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .tab_active {
        width: 50px;
        height: 3px;
        background: rgba(255, 115, 0, 1);

        margin-top: 10px;
    }
</style>